<html>

	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit|ie-comp|ie-stand" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" media="all">
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link href="//cdn.bootcss.com/morris.js/0.5.1/morris.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_56813ruk9vi2uik9.css" />
		<title>详情信息</title>
		<style>
			button:nth-child(1) {
				background: #5eaee4;
			}
			
			#changeChNo {
				background: #2a89ca;
			}
			
			[v-cloak] {
				display: none;
			}
			
			#recordTable_wrapper {
				position: relative;
			}
			
			.dataTables_length {
				position: absolute;
				bottom: 0;
				left: 0;
			}
		</style>
	</head>

	<body>
		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
			<div style="float: right; padding-right: 20px;">
				<!--<div style="float: left; z-index: 999;">
					<div class="layui-btn btn-add btn-default" id="deviceIds">删除设备</div>
					<button class="layui-btn mgl-20" id="bjxx">编辑信息</button>
					<button class="layui-btn mgl-20 " id="pzcs">配置参数</button>
				</div>-->
			</div>
			<ul class="layui-tab-title" style="width: 320px;">
				<li class="layui-this">设备详情</li>
				<li onclick="displayExceptionRecords()">报警记录</li>
				<li onclick="vue.showStatistics()">统计分析</li>
				<li onclick="disPlayHistoryRecords()">历史数据</li>
			</ul>
			<div class="layui-tab-content" id="deviceDetails">
				<!--内容1-->
				<div class="layui-tab-item layui-show">
					<div class="layui-tab" style="margin: 5px 0 25px;">
						<blockquote class="layui-elem-quote mylog-info-tit" style="background-color:#fff; margin:0; padding: 0; border-bottom: 1px solid #ccc;">
							<ul class="handle-box">
								<li class="handle-item" style="padding-left: 15px;">
									<label class="layui-form-label">
                            	<i style="font-size: 18px; " class="iconfont" :class="device.deviceTypeInfoIcon"></i>
                            </label>
									<label class="layui-form-label" style="font-weight:bold;"><span v-cloak>[{{ device.sceneId | filters("sceneId") }}]</span><span v-cloak>{{ device.deviceName }}</span></label>
									<label class="layui-form-label" style="font-weight:bold;"> 编号：<span v-cloak>{{device.deviceNo}}</span></label>
									<label class="layui-form-label">
                            	<i style="font-size: 18px; " class="iconfont" :class="device.powerIcon"></i>&nbsp;<span style="font-weight:bold;" v-cloak>{{device.power}}%</span>
                            </label>
									<label class="layui-form-label">
                            	<i style="font-size: 14px; " class="iconfont" :class="device.xinhao"></i>&nbsp;<span style="font-weight:bold;" v-cloak>{{device.singnal}}</span>
                            </label>
								</li>
								<li class="handle-item" style="padding-left: 15px;">
									<label class="layui-form-label"><span v-cloak>{{device.recordDetail1}}</span></label>
								</li>
								<li class="handle-item" style="padding-left: 15px;">
									<label class="layui-form-label"><span v-cloak>{{device.recordDetail2}}</span></label>
									<label class="layui-form-label"><span v-cloak>{{device.lastRecord}}</span></label>
								</li>
								<li class="handle-item" style="margin-left: -15px;">
									<label class="layui-form-label">
                        		<i style="font-size: 24px;" class="iconfont " :style="device.iconColor" :class="device.stateIcon"></i>
                        	<span v-cloak>{{device.exceptionDetail}}</span></label>
								</li>
								<li class="handle-item" style="padding-left: 15px;">
									<label class="layui-form-label"><span v-cloak>{{device.monitorPosition}}  {{device.deviceDesc}}</span></label>
								</li>
								<li class="handle-item">
									<div class="layui-btn mgl-20" id="unfold">展开详情</div>
								</li>
								<li class="handle-item" id="model" style="display: none;padding-left: 15px;">
									<label class="layui-form-label"><span style="font-weight:bold;">型号：</span>{{device.deviceModel}}</label>
									<label class="layui-form-label"><span style="font-weight:bold;">类型：</span>{{device.deviceType | filters("deviceType")}}</label>
									<label class="layui-form-label"><span style="font-weight:bold;">固件版本号：</span>{{device.deviceVersion}}</label>
									<label class="layui-form-label"><span style="font-weight:bold;">应用场景：</span>{{device.sceneId | filters("sceneId")}}</label>
								</li>
								<li class="handle-item" id="time" style="display: none;padding-left: 15px;">
									<label class="layui-form-label"><span style="font-weight:bold;">添加时间：</span>{{device.createTime | timeChange(0)}}</label>
									<label class="layui-form-label"><span style="font-weight:bold;">设备位置：</span>{{device.deviceAddress}}</label>
								</li>
							</ul>
						</blockquote>
					</div>
					<div class="user-collect" style=" width: 100%;">

						<div class="layui-form-item">
							<div class="layui-input-inline" style="padding-left: 10xp;">
								<select style="background-color: #5fbdc7; text-align: center; border: 0px; border-radius: 5px; width: 80px; height: 38px; line-height: 30px; color: #fff;" name="chNo" lay-verify="required" v-model="chNo" @change="drawLine()" v-cloak>
									<option v-for="option in chNoOptions" v-bind:value="option.value" v-cloak>
										<span v-cloak>{{ option.text }}</span>
								</select>
								<select style="background-color: #5fbdc7; text-align: center; border: 0px; border-radius: 5px; width: 80px; height: 38px; line-height: 30px; color: #fff;" name="recordType" lay-verify="required" v-model="recordType" @change="drawLine()" v-cloak>
									<option v-for="option in recordTypeOptions" v-bind:value="option.value" v-cloak>
										<span v-cloak>{{ option.text }}</span>
								</select>
							</div>
							<div class="layui-input-inline">
								<input class="layui-input" placeholder="选择时间" v-model="today" id="lineDate" onclick="layui.laydate({elem: this,  max: laydate.now(+0), choose: function(datas){ 
                               		vue.dateChange(datas);
					            }})">
							</div>
						</div>
						<div id="recordLine" style=" width: 100%; height: 400px;"></div>
					</div>
				</div>
				<!--内容2-->
				<div class="layui-tab-item">
					<div class="layui-tab">
						<blockquote class="layui-elem-quote mylog-info-tit">
							<ul class="handle-box">
								<li class="handle-item">
									<span class="layui-form-label">报警状态：</span>
									<div style="height: 38px; line-height: 38px;" class="btn_block">
										<label class="layui-btn-block">不限<input type="radio" id="radio1" name="exceptionType" value="5" hidden="hidden"checked onclick="typehecked(5)" ></label>
										<label class="layui-btn-none">超限<input type="radio" id="radio2" name="exceptionType" value="1" hidden="hidden" onclick="typehecked(1)"></label>
										<label class="layui-btn-none">异常<input type="radio" id="radio3" name="exceptionType" value="0" hidden="hidden" onclick="typehecked(0)"></label>
										<label class="layui-btn-none">离线<input type="radio" id="radio4" name="exceptionType" value="3" hidden="hidden" onclick="typehecked(3)"></label>
									</div>
								</li>

							</ul>
						</blockquote>
					</div>
					<div class="layui-tab-item layui-field-box layui-show">
						<table class="table-box table-sort" id="exceptionTable" lay-even="" lay-skin="nob">
						</table>
					</div>
				</div>
				<!--内容3-->
				<div class="layui-tab-item">

					<div id="line-chart" style="height:300px;"></div>
					<div style=" width: 100%;">
						<div id="pie-chart" style=" height:300px; float: left; "></div>
						<div id="column-chart" style="height:300px; float: left; padding-left: 50px;"></div>
					</div>

				</div>
				<!--内容4-->
				<div class="layui-tab-item">
					<div class="layui-tab">
						<blockquote class="layui-elem-quote mylog-info-tit">
							<ul class="handle-box">
								<li class="handle-item">
			                        <span class="layui-form-label">状态类型：</span>
			                        <div style="height: 38px; line-height: 38px;" class="btn_block device_state">
			                            <label class="layui-btn-none">全部<input type="radio" name="dataType" value="0"style="display: none;"  v-model="dataType" @change="timeChange(null,null)"></label>
			                            <label class="layui-btn-block">正常<input type="radio"  name="dataType" value="1"style="display: none;" v-model="dataType" @change="timeChange(null,null)"></label>
			                            <label class="layui-btn-none">异常<input type="radio"  name="dataType" value="2"style="display: none;" v-model="dataType" @change="timeChange(null,null)"></label>
			                        </div>
			                    </li>
								<li class="handle-item">
									<div class="layui-form-item">
										<label class="layui-form-label">上传时间：</label>
										<div class="layui-input-inline">
											<input class="layui-input" placeholder="开始时间" id="start" v-model="startTime" onclick="layui.laydate({elem: this,  max: laydate.now(+0), choose: function(datas){ //选择日期完毕的回调
					                vue.timeChange('start',datas);
					            }})">
										</div>
										<div class="layui-input-inline">
											<input class="layui-input" placeholder="结束时间" id="end" v-model="endTime" onclick="layui.laydate({elem: this,  max: laydate.now(+0), choose: function(datas){ //选择日期完毕的回调
					                vue.timeChange('end',datas);
					            }})">
										</div>
										<button class="layui-btn mgl-20" @click="exportExcel()">导出Excel</button>
									</div>
								</li>
							</ul>
						</blockquote>
					</div>
					<div class="layui-tab-item layui-field-box layui-show">
						<table class="table-box table-sort" id="recordTable" lay-even="" lay-skin="nob">

						</table>
					</div>
				</div>
			</div>
		</div>
		<script src="layui/layui.js"></script>
		<script src="//cdn.bootcss.com/echarts/3.3.2/echarts.min.js"></script>
		<script src="//cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
		<script src="js/echarts/macarons.js"></script>
		<script src="js/echarts/china.js"></script>
		<script src="js/user-collect.js"></script>
		<script src="js/vue/vue.js"></script>
		<script src="js/common.js"></script>
		<script src="js/device_detail_tabs.js"></script>
		<script src="//cdn.bootcss.com/vue-resource/1.2.1/vue-resource.js"></script>
		<script src="//cdn.bootcss.com/morris.js/0.5.1/morris.min.js"></script>
		<script src="//cdn.bootcss.com/raphael/2.2.7/raphael.min.js"></script>

		<script>
			layui.use('laydate', function() {
				var laydate = layui.laydate;
				var $ = layui.jquery;

				function setSize() {
					$('#line-chart').css("width", $(window).width());
					$('#pie-chart').css("width", $(window).width() * 0.45);
					$('#column-chart').css("width", $(window).width() * 0.45);

				}

				//页面加载时设框架款宽度
				$(document).ready(function() {
					setSize();
				});

				//人工拖扯窗口大小时，重设框架款宽度
				$(window).resize(function() {
					setSize();
				});

				$(document).ready(function() {
					$("#unfold").click(function() {
						$("#model").toggle();
						$("#time").toggle();
						if($("#unfold").text()=="展开详情")
							$("#unfold").text("收起详情");
						else if($("#unfold").text()=="收起详情")
							$("#unfold").text("展开详情");
					});
				});

				var start = {
					min : '2000-01-01 00:00:01',
					max : laydate.now(),
					istoday : false,
					choose : function(datas) {
						end.min = datas; //开始日选好后，重置结束日的最小日期
						end.start = datas //将结束日的初始值设定为开始日
						vue.timeChange('start', datas);
					}
				};

				var end = {
					min : getNowDate(),
					max : laydate.now(),
					istoday : false,
					choose : function(datas) {
						start.max = datas; //结束日选好后，重置开始日的最大日期
						vue.timeChange('end', datas);
					}
				};

				document.getElementById('start').onclick = function() {
					start.elem = this;
					laydate(start);
				}
				document.getElementById('end').onclick = function() {
					end.elem = this
					laydate(end);
				}

				$(".user-collect button").click(function() {
					$(this).css({
						'background': '#5eaee4'
					}).siblings('button').css({
						'background': '#2a89ca'
					})
				});
				$(".btn_block > label").click(function() {
					$(this).siblings().removeClass("layui-btn-block").addClass("layui-btn-none");
					$(this).addClass("layui-btn-block");
				});

			});

			Vue.filter("filters", function(value, optionName) {
				return getOption(optionName, value);
			});

			Vue.filter("timeChange", function(value) {
				return replaceTime(value / 1000);
			});

			var vue = new Vue({

				el: '#deviceDetails',
				data: {
					device: {
						"deviceName": "",
						"deviceNo": "",
						"device": "",
						"deviceState": "",
						"deviceType": "",
						"sceneId": "",
						"createTime": "",
						"power": "",
						"singnal": "",
						"deviceTypeInfo": "",
					},
					today: getNowDate(),
					startTime: getNowDate(),
					endTime: getNowDate(),
					dataType: 1,
					recordType: 0,
					token: new Object(),
					chNo: 1,
					recordTypeOptions: [{
							text: '温度',
							value: '0'
						},
						{
							text: '湿度',
							value: '1'
						},
					],
					chNoOptions: [{
							text: '通道一',
							value: '1'
						},
						{
							text: '通道二',
							value: '2'
						},
					]
				},
				mounted: function() {

					this.$nextTick(function() {
						this.token.accessToken = accessToken;
						this.getDeviceDetails();
						//this.drawLine();
					});
					this.drawLine();
				},
				methods: {
					exportExcel: function() {
						window.location.href = url + '/ic-iot/device/' + deviceId + '/records/excel?startTime=' + this.startTime + '&endTime=' + this.endTime+ '&dataType=' + this.dataType;
					},
					timeChange: function(type, time) {
						
						if(type == "start")
							this.startTime = time;
						if(type == "end")
							this.endTime = time;
						var start = $("#start").val();
						var end = $("#end").val();
						var dataTypeValue=this.dataType;
						if(!start) {
							layer.msg("开始时间不能为空");
							return false;
						}
						if(!end) {
							layer.msg("结束时间不能为空");
							return false;
						}

						$('#recordTable').DataTable({
							//开启服务器模式
							"serverSide": true,
							"destroy": true,
							"processing": false, //DataTables载入数据时，是否显示‘进度’提示
							//"stateSave": true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
							"scrollCollapse": true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
							//"paginationType": "full_numbers", //详细分页组，可以支持直接跳转到某页
							"language": lang, //提示信息
							"autoWidth": false, //自适应宽度，
							"lengthMenu": [30, 50, 100],
							"stripeClasses": ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
							"searching": false, //是否允许Datatables开启本地搜索
							"paging": true, //是否开启本地分页
							"lengthChange": true, //是否允许产品改变表格每页显示的记录数
							"info": false, //控制是否显示表格左下角的信息
							//跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
							"order": [0, 'desc'], //asc升序   desc降序
							"aoColumnDefs": [{
								"orderable": false,
								"aTargets": [1, 2, 3, 4] // 指定列不参与排序
							}],

							//"deferRender": true, //延迟渲染
							//"ajax":"json/device.json",
							"ajax": {
								url: url + '/ic-iot/device/' + deviceId + '/records/history', //117
								type: 'get',
								data: {
									"startTime": start,
									"endTime": end,
									"dataType": dataTypeValue,
								},
								dataType: 'json',
								beforeSend: function(request) {
									request.setRequestHeader("accessToken", accessToken);
								},
							}, //数据的路径 "http://192.168.5.133:8081/ic-iot/admin/1/devices" /"json/device.json"
							select: { //单击tr选中当前行
								style: 'multi'
							},
							"columns": [{
								"data": "recordTimeInfo",
								"sTitle": "采集时间", //标题
								"sDefaultContent": "" //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
							}, {
								"data": function(obj) {
                                    if(obj.tem || obj.hum){
                                        var tem = !obj.tem ? '- -' : obj.tem + '℃';
                                        var hum = !obj.hum ? '- -' : obj.hum + '%';
                                        return  tem +' '+ hum;
                                    }else{
                                        var temCh1 = (obj.temCh1 == '' || obj.temCh1 == null) ? '- -' : obj.temCh1 + '℃';
                                        var humCh1 = (obj.humCh1 == '' || obj.humCh1 == null) ? '- -' : obj.humCh1 + '%';
                                        return  temCh1 +' '+ humCh1;
                                    }
								},
								"sTitle": "通道一", //标题
								"sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
							}, {
								"data":  function(obj) {
									var dataStr = "";
									if(!obj.temCh2) {
										if(obj.temCh2 == 0) {
											dataStr += "0℃";
										} else {
											dataStr += "";
										}
									} else {
										dataStr += obj.temCh2 + '℃ ';
									}
									dataStr += "  ";
									if(!obj.humCh2) {
										if(obj.humCh2 == 0) {
											dataStr += "0%";
										} else {
											dataStr += "";
										}
									} else {
										dataStr += obj.humCh2 + '% ';
									}
									return dataStr;
								},
								"sTitle": "通道二", //标题
								"sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
							},{
								"data": function(obj) {
									if(obj.state == 0) {
										return '<u class="btn-showuser" style="color:#fad60d">' + '故障' + '</u>';
									} else if(obj.state == 1) {
										return '<u class="btn-showuser" style="color:red">' + '超限' + '</u>';
									} else if(obj.state == 3) {
										return '<u class="btn-showuser" style="color:#999">' + '离线' + '</u>';
									} else{
										return '<u class="btn-showuser" style="color:#009688">' + '正常' + '</u>';
									}
								},
								"sTitle": "数据状态", //标题
								"sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
							},{
								"data": "exDetail",
								"sTitle": "异常原因", //标题
								"sType": 'chinese',
								"sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
							}]
						});
					},
					showStatistics: function() {

						var lineChart = echarts.init(document.getElementById('line-chart'));
						var lineOption = {
							title: {
								text: '近30天异常数量变化曲线'
							},
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'cross',
									label: {
										backgroundColor: '#6a7985'
									}
								}
							},
							legend: {
								data: ['异常数量']
							},
							toolbox: {
								feature: {
									saveAsImage: {}
								}
							},
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
							xAxis: [{
								type: 'category',
								boundaryGap: false,
								data: []
							}],
							yAxis: [{
								type: 'value'
							}],
							series: [{
								name: '搜索引擎',
								type: 'line',
								stack: '总量',
								label: {
									normal: {
										show: true,
										position: 'top'
									}
								},
								areaStyle: {
									normal: {}
								},
								data: []
							}]
						};

						lineChart.setOption(lineOption);

						this.$http.get(url + "/ic-iot/users/" + adminId + "/devices/" + deviceId + "/exceptions/day/count", {
							headers: this.token
						}).then(function(response) {
							var res = response.body;
							if(res.code == 1) {
								var result = res.result;
								var dateList = result.date;
								var countList = result.count;
								lineChart.setOption({
									xAxis: [{
										data: dateList
									}],
									series: [{
										data: countList
									}]
								});
							} else {
								ifajax(data);
							}
						});

						var pieChart = echarts.init(document.getElementById('pie-chart'));
						pieOption = {
							title: {
								text: '报警类型占比',
								//subtext: '纯属虚构',
								x: 'center'
							},
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b} : {c} ({d}%)"
							},
							legend: {
								orient: 'vertical',
								left: '5%',
								data: ['故障', '超限', '离线']
							},
							series: [{
								name: '访问来源',
								type: 'pie',
								radius: '55%',
								center: ['50%', '60%'],
								itemStyle: {
									emphasis: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						};
						pieChart.setOption(pieOption);
						this.$http.get(url + "/ic-iot/devices/" + deviceId + "/exceptions/count", {
							headers: this.token
						}).then(function(response) {
							var res = response.body;
							if(res.code == 1) {
								var result = res.result;
								pieChart.setOption({
									series: [{
										data: result
									}]
								});
							} else {
								ifajax(data);
							}
						});

						var columnChart = echarts.init(document.getElementById('column-chart'));
						columnOption = {
							title: {
								text: '近六月报警次数统计',

							},
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'shadow'
								}
							},
							legend: {
								data: ['故障', '离线', "超限"],
								right: 0
							},
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
							yAxis: {
								type: 'value',
								boundaryGap: [0, 0.01]
							},
							xAxis: {
								type: 'category',
								data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
							},

						};
						columnChart.setOption(columnOption);
						this.$http.get(url + "/ic-iot/users/" + adminId + "/devices/" + deviceId + "/exceptions/month/count", {
							headers: this.token
						}).then(function(response) {
							var res = response.body;
							if(res.code == 1) {
								var result = res.result;
								var month = result.month;
								var dataList = result.dataList;
								for(var i = 0; i < dataList.length; i++) {
									dataList[i].type = 'bar';
								}
								columnChart.setOption({
									xAxis: {
										data: month
									},
									series: dataList
								});
							} else {
								ifajax(res);
							}
						});

					},
					getDeviceDetails: function() {
						this.$http.get(url + "/ic-iot/devices/" + deviceId + "/record", {
							headers: this.token
						}).then(function(response) {
							var res = response.body;
							if(res.code == 1) {
								var result = res.result;
								this.device = result;
								var detail = "";
								var humch = '';
								
								if(this.device.temCh1 != null || this.device.humCh1 != null) {
									if(this.device.humCh1 != null) {
										humch = this.device.humCh1 + "%";
									} else {
										humch = '  - -';
									};
									if(this.device.temCh1 != null) {
										humchs = this.device.temCh1 + "℃";
									} else {
										humchs = '  - -';
									};
									details = humchs + humch;
								} else {
									details = '- -  - -';
								}
								if(this.device.temCh2 != null || this.device.humCh2 != null) {
									if(this.device.humCh2 != null) {
										humch = this.device.humCh2 + "%";
									} else {
										humch = '  - -';
									};
									if(this.device.temCh2 != null) {
										humchs = this.device.temCh2 + "℃";
									} else {
										humchs = '  - -';
									};
									detail = humchs + humch;
								} else {
									detail = '- -  - -';
								}
								/* if (this.device.temCh2 != null) {
								     var hum = this.device.humCh2;
								     detail += "" + this.device.temCh2 + "℃" + ( hum == null ? "" : "   " + hum + "%");
								 }else{
								 	detail = '- -';
								 }*/
								this.device.recordDetail1 = details;
								this.device.recordDetail2 = detail;

								if(this.device.power > 80) {
									this.device.powerIcon = 'icon-iconset0252';
								} else if(this.device.power > 60) {
									this.device.powerIcon = 'icon-bf-icon-battery';
								} else if(this.device.power > 40) {
									this.device.powerIcon = 'icon-dianchi';
								} else if(this.device.power > 20) {
									this.device.powerIcon = 'icon-bf-icon-battery4';
								} else {
									this.device.powerIcon = 'icon-dianchi1';
								};
								if(this.device.singnal > 90) {
									this.device.xinhao = 'icon-xinhao';
								} else if(this.device.singnal > 50) {
									this.device.xinhao = 'icon-xinhao-copy';
								} else if(this.device.singnal > 20) {
									this.device.xinhao = 'icon-xinhao-copy-copy';
								} else {
									this.device.xinhao = 'icon-xinhao-copy-copy-copy-copy';
								};
								if(this.device.deviceState == 2) {
									this.device.stateIcon = 'icon-chenggong';
									this.device.iconColor = 'color: #4dccb3;';
								} else {
									this.device.stateIcon = 'icon-jinggao';
									this.device.iconColor = 'color: #fad60d;';
								}
								if(this.device.deviceTypeInfo == 'Wifi设备') {

									this.device.deviceTypeInfoIcon = 'icon-wifi';
								} else {
									this.device.deviceTypeInfoIcon = 'icon-gprs';
								}
								if(this.device.lastRecord!=""){
									this.device.lastRecord =replaceTime(this.device.lastRecord / 1000);
								}

							} else {
								ifajax(res);
							}
						});
					},
					changeChNo: function(chNo) {
						this.chNo = chNo;
						this.drawLine();
					},
					dateChange: function(date) {
						this.today = date;
						this.drawLine();
					},
					drawLine: function() {
						var time = Date.parse(new Date(this.today));
						$.ajax({
							type: "GET",
							url: url + "/ic-iot/devices/" + deviceId + "/records/date",
							async: true,
							beforeSend: function(request) {
								request.setRequestHeader("accessToken", accessToken);
							},
							data: {
								time: time, // Date.parse(new Date(this.today)),
								chNo: this.chNo,
								recordType: this.recordType,
							},
							success: function(data) {
								if(data['code'] == 1) {
									var result = data['result'];
									var data = result['records'];
									var data = JSON.stringify(data);
									var data = JSON.parse(data);
									var line = document.getElementById('recordLine');
									var myChart = echarts.init(line);
									myChart.setOption(option = {
										/*title: {
										     text: result['deviceName']
										 },*/
										tooltip: {
											trigger: 'axis',
										},
										xAxis: {
											data: data.map(function(item) {
												return item[0];
											})
										},
										yAxis: {
											splitLine: {
												show: false
											},
											axisLabel: {
												type: 'value',
												formatter: '{value}' + result['unit'],
											},
											min: (result['min'] < result['minRecord'] ? result['min'] :
												result['minRecord']) - 1,
											max: (result['max'] > result['maxRecord'] ? result['max'] :
												result['maxRecord']) + 1
										},
										toolbox: {
											left: 'center',
											feature: {
												dataView: {
													show: true,
													readOnly: false
												},
												restore: {},
												saveAsImage: {}
											}
										},
										dataZoom: [{
											startValue: '2014-06-01'
										}, {
											type: 'inside'
										}],
										series: {
											name: result['dataType'],
											type: 'line',
											lineStyle: {
												normal: {
													color: '#3c8dbc',
													width: 3
												}
											},
											data: data.map(function(item) {
												return item[1];
											}),
											symbol: 'none',
											markLine: {
												silent: true,
												data: [{
													yAxis: result['min']
												}, {
													yAxis: result['max']
												}]
											}
										}
									});
								} else {
									ifajax(data);
								}
							}
						});
					}
				}
			});
		</script>
	</body>

</html>